<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>逻辑游戏</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <link rel="icon" th:href="@{LightYear/favicon-def.ico}" href="LightYear/favicon-def.ico" type="image/ico">
    <link th:href="@{LightYear/css/bootstrap.min.css}" href="LightYear/css/bootstrap.min.css" rel="stylesheet">
    <link th:href="@{LightYear/css/materialdesignicons.min.css}" href="LightYear/css/materialdesignicons.min.css"
          rel="stylesheet">
    <link th:href="@{LightYear/css/style.min.css}" href="LightYear/css/style.min.css" rel="stylesheet">

    <script type="text/javascript" th:src="@{LightYear/js/jquery.min.js}" src="LightYear/js/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{LightYear/layer/layer.js}" src="LightYear/layer/layer.js"></script>




</head>
<body>

<div class="container">

    <div class="row">
        <!--猜数字-->
        <div class="col">
            <h2 style="margin-left: 50px" id="helpBtn" title="点击查看[猜数字]规则" type="button"><font
                    color="green">猜数字游戏</font></h2>
            <div class="layuimini-container">

                <br>

                <div class="container-fluid">
                    <button class="btn btn-w-md btn-round btn-success" id="startBtn">重新开始<span
                            class="mdi mdi-reload"></span></button>&ensp;&ensp;&ensp;
                    <!--<button class="btn btn-w-md btn-round btn-info" >游戏规则<span class="mdi mdi-help" ></span></button>-->

                     <br><br>
                    <form class="form-inline" action="#" method="post" onsubmit="return false;">
                        <div class="form-group">
                            <label class="sr-only"></label>
                            <input class="form-control" type="text" maxlength="4"
                                   onkeyup="value=value.replace(/[^\d\.]/g,'')" name="gamenum" id="gamenum"
                                   placeholder="请输入4位数字">
                        </div>


                        <div class="form-group">
                            <button class="btn btn-success" type="button" id="guessBtn" disabled="disabled">猜测</button>
                            &ensp;
                            <button class="btn btn-warning" type="reset">重置</button>
                        </div>
                    </form>
                    <hr>
                    <ol>
                        <li id="info1" style="display: none"></li>
                        <li id="info2" style="display: none"></li>
                        <li id="info3" style="display: none"></li>
                        <li id="info4" style="display: none"></li>
                        <li id="info5" style="display: none"></li>
                        <li id="info6" style="display: none"></li>
                        <li id="info7" style="display: none"></li>
                        <li id="info8" style="display: none"></li>
                    </ol>
                    <h3 id="resultInfo"></h3>
                </div>


            </div>
        </div>

    </div>
</div>


<script>


    $("#helpBtn").click(function () {

        layer.open({
            type: 1,
            btn: '知道了',
            skin: "layui-layer-molv",
            area: ['355px', '425px'], //宽高
            offset: ['50px', '50px'],  //位置   同时定义top、left坐标
            title: "游戏规则",
            content: "<div class=\"card-body\"><p>系统自动生成一个不重复的4位数字(0可以在开头)，玩家根据提示猜测该四位数字，若数字和顺序都正确，则系统提示A。" +
                "\t\t若数字正确，位置不正确，则系统提示B。玩家需在8次机会内猜出该数字即游戏胜利！" +
                "</p><p>例如:系统自动生成9527,玩家输入1234,有且只有数字2命中,但位置不正确,则系统提示为0A1B," + "玩家输入9876,由于数字9和7命中,9位置正确7位置不正确," +
                "则系统提示1A1B,以次类推直至4A0B" + "则游戏胜利!......</p></div>"

        })
    })


    $("#resetBtn").click(function () {

        // window.location.reload();
        window.location.href = "toGamePage";
    })


    var time = 0;
    $("#startBtn").click(function () {
        $.ajax({
            url: "getRandom",
            type: "GET",
            success: function (result) {
                layer.msg("系统已随机生成一个不重复的四位数！");
                console.log("系统自动生成的随机数：" + result);
                $("#guessBtn").html("猜测");
                $("#guessBtn").attr("disabled", false);
                $("#resultInfo").html("系统生成数字为：" + result);
                $("#resultInfo").hide();
                time = 0;
                $("#gamenum").val("");
                $("#info1").hide();
                $("#info2").hide();
                $("#info3").hide();
                $("#info4").hide();
                $("#info5").hide();
                $("#info6").hide();
                $("#info7").hide();
                $("#info8").hide();
            }
        })
    })


    $("#guessBtn").click(function () {
        var gamenum = $("input[name='gamenum']").val();
        var gamelength = gamenum.length;
        var num1 = gamenum.charAt(0);
        var num2 = gamenum.charAt(1);
        var num3 = gamenum.charAt(2);
        var num4 = gamenum.charAt(3);

        if (gamelength < 4) {
            layer.tips("必须输入4位数字", "#gamenum");
            return false;
        }
        if (num1 == num2 || num1 == num3 || num1 == num4
            || num2 == num3 || num2 == num4 || num3 == num4) {
            layer.tips("4位数不能有重复数字", "#gamenum");
            return false;
        }
        if (gamenum == "") {
            layer.tips("请输入4位数字", "#gamenum");
            return false;
        }

        time++;
        $("#guessBtn").html("猜测了" + time + "次！");
        if (time == 1) {
            $.ajax({
                url: "startRandom",
                type: "POST",
                data: {"gamenum": gamenum},
                success: function (result) {
                    $("#info1").attr("style", "dispaly:block;");
                    $("#info1").html("第" + time + "次猜测数字为：" + gamenum + "系统提示为：" + result);

                    $("input[name='gamenum']").val("");

                    if (result == "恭喜你猜对了！") {
                        layer.alert("恭喜你在第" + time + "次猜对数字！", {icon: 6});
                        $("#guessBtn").html("猜测");
                        $("#guessBtn").attr("disabled", true);
                    }
                }
            })
        }
        if (time == 2) {
            $.ajax({
                url: "startRandom",
                type: "POST",
                data: {"gamenum": gamenum},
                success: function (result) {
                    $("#info2").attr("style", "dispaly:block;");
                    $("#info2").html("第" + time + "次猜测数字为：" + gamenum + "系统提示为：" + result);

                    $("input[name='gamenum']").val("");
                    if (result == "恭喜你猜对了！") {
                        layer.alert("恭喜你在第" + time + "次猜对数字！", {icon: 6});
                        $("#guessBtn").html("猜测");
                        $("#guessBtn").attr("disabled", true);
                    }
                }
            })
        }
        if (time == 3) {
            $.ajax({
                url: "startRandom",
                type: "POST",
                data: {"gamenum": gamenum},
                success: function (result) {
                    $("#info3").attr("style", "dispaly:block;");
                    $("#info3").html("第" + time + "次猜测数字为：" + gamenum + "系统提示为：" + result);

                    $("input[name='gamenum']").val("");
                    if (result == "恭喜你猜对了！") {
                        layer.alert("恭喜你在第" + time + "次猜对数字！", {icon: 6});
                        $("#guessBtn").html("猜测");
                        $("#guessBtn").attr("disabled", true);
                    }
                }
            })
        }
        if (time == 4) {
            $.ajax({
                url: "startRandom",
                type: "POST",
                data: {"gamenum": gamenum},
                success: function (result) {
                    $("#info4").attr("style", "dispaly:block;");
                    $("#info4").html("第" + time + "次猜测数字为：" + gamenum + "系统提示为：" + result);

                    $("input[name='gamenum']").val("");
                    if (result == "恭喜你猜对了！") {
                        layer.alert("恭喜你在第" + time + "次猜对数字！", {icon: 6});
                        $("#guessBtn").html("猜测");
                        $("#guessBtn").attr("disabled", true);
                    }
                }
            })
        }
        if (time == 5) {
            $.ajax({
                url: "startRandom",
                type: "POST",
                data: {"gamenum": gamenum},
                success: function (result) {
                    $("#info5").attr("style", "dispaly:block;");
                    $("#info5").html("第" + time + "次猜测数字为：" + gamenum + "系统提示为：" + result);

                    $("input[name='gamenum']").val("");
                    if (result == "恭喜你猜对了！") {
                        layer.alert("恭喜你在第" + time + "次猜对数字！", {icon: 6});
                        $("#guessBtn").html("猜测");
                        $("#guessBtn").attr("disabled", true);
                    }
                }
            })
        }
        if (time == 6) {
            $.ajax({
                url: "startRandom",
                type: "POST",
                data: {"gamenum": gamenum},
                success: function (result) {
                    $("#info6").attr("style", "dispaly:block;");
                    $("#info6").html("第" + time + "次猜测数字为：" + gamenum + "系统提示为：" + result);

                    $("input[name='gamenum']").val("");
                    if (result == "恭喜你猜对了！") {
                        layer.alert("恭喜你在第" + time + "次猜对数字！", {icon: 6});
                        $("#guessBtn").html("猜测");
                        $("#guessBtn").attr("disabled", true);
                    }
                }
            })
        }
        if (time == 7) {
            $.ajax({
                url: "startRandom",
                type: "POST",
                data: {"gamenum": gamenum},
                success: function (result) {
                    $("#info7").attr("style", "dispaly:block;");
                    $("#info7").html("第" + time + "次猜测数字为：" + gamenum + "系统提示为：" + result);

                    $("input[name='gamenum']").val("");
                    if (result == "恭喜你猜对了！") {
                        layer.alert("恭喜你在第" + time + "次猜对数字！", {icon: 6});
                        $("#guessBtn").html("猜测");
                        $("#guessBtn").attr("disabled", true);
                    }
                }
            })
        }
        if (time == 8) {
            $.ajax({
                url: "startRandom",
                type: "POST",
                data: {"gamenum": gamenum},
                success: function (result) {
                    $("#info8").attr("style", "dispaly:block;");
                    $("#info8").html("第" + time + "次猜测数字为：" + gamenum + "系统提示为：" + result);
                    $("input[name='gamenum']").val("");
                    if (result == "恭喜你猜对了！") {
                        layer.alert("恭喜你在第" + time + "次猜对数字！", {icon: 6});
                        $("#guessBtn").html("猜测");
                        $("#guessBtn").attr("disabled", true);
                    } else {
                        layer.alert("次数超过限制，游戏结束!", {icon: 5});
                        $("#guessBtn").html("猜测");
                        $("#guessBtn").attr("disabled", true);
                        $("#resultInfo").attr("style", "dispaly:block;");
                    }
                }
            })

        }
    });


</script>


</body>
</html>